<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import dragVerify from '@/components/dragVerify/dragVerify.vue';
import { ElMessage } from "element-plus";
import {Post} from "@/utils/api";
import { encrypt,decrypt }from "@/utils/utils";
import Cookies from "js-cookie";
import { setLocalStorage } from "@/utils/storage";

// import {GET,POST,FILE,FILEPOST,PUT,GETNOBASE} from "@/api/api";
// const indexUrl=  {
//   'leftTop':'/bigscreen/countDeviceNum',//左上
//   'leftCenter':'/bigscreen/countUserNum',//左中
//   "centerMap":"/bigscreen/centerMap",
//   "centerBottom":"/bigscreen/installationPlan",
//
//   'leftBottom':"/bigscreen/leftBottom", //坐下
//   'rightTop':"/bigscreen/alarmNum", //报警次数
//   'rightBottom':'/bigscreen/rightBottom',//右下
//   'rightCenter':'/bigscreen/ranking',// 报警排名
// }

const router = useRouter();
const email = ref('');
const username = ref('');
const password = ref('');
const emailCode = ref('');
const form = ref({isVerifyPass: false});

function goToIndex() {
  router.push('/analysis/index');
}

function goRegisterIndex() {
  router.push('/register/index');
}

function goLoginIndex() {
  router.push('/login/index');
}

async function emailLogin() {
  if (form.value.isVerifyPass) {
    // 示例: 在真正的GET请求中设置请求参数时需要注意格式
    localStorage.setItem("Authorization", "token");

    try {
      const encryptedEmail = encrypt(email.value)

      const data = {
        email: encryptedEmail,
        emailCode: emailCode.value,
      };

      const r = await Post('/user/email/login', data);
      if (r.success){
        const str = decrypt(r)
        ElMessage.success(r.message);

        setLocalStorage("Authorization", r.data, 180)
        setLocalStorage("user", str, 180)

        const expirationTime = new Date();
        expirationTime.setTime(expirationTime.getTime() + 60 * 60 * 1000);
        Cookies.set("Authorization", r.data, { expires: expirationTime })
        goToIndex();
      }else {
        ElMessage.error(r.message)
      }

    } catch (error) {
      ElMessage.error('登录失败');
      console.error('Post 请求错误:', error);
    }
  } else {
    ElMessage.error('验证码有误');
  }
}

async function getEmailCode() {
  const encryptedEmail = encrypt(email.value)

  const data = {
    email: encryptedEmail
  };

  const sendCode = await Post('/user/sendCode', data);
  if (sendCode.success){
    ElMessage.success(sendCode.message);
  }else {
    ElMessage.error(sendCode.message)
  }

}
</script>

<template>
  <div class="input-container">
    <span style="margin-bottom: 10px; color: black; font-size: 20px"><b>邮 箱 登 录</b></span>
    <el-input
        v-model="email"
        style="width: 290px; height: 50px; margin-bottom: 10px; font-size: 18px;"
        placeholder="请输入邮箱"
        clearable
    />
    <el-input
        v-model="emailCode"
        style="width: 290px; height: 50px; margin-bottom: 10px; font-size: 18px;"
        placeholder="请输入验证码"
        show-password
    >
      <template #append>
        <el-button
            type="primary"
            @click="getEmailCode"
            class="get-code-button"
        >
          获取验证码
        </el-button>
      </template>
    </el-input>
    <div class="content">
      <dragVerify v-model:value="form.isVerifyPass"></dragVerify>
    </div>
    <el-button
        type="primary"
        class='login-button'
        @click="emailLogin"
        plain
        :disabled="!form.isVerifyPass"
    >
      登录
    </el-button>

    <div class="footer">
      <button @click="goRegisterIndex">注册账号</button>
      <button @click="goLoginIndex">账号登录</button>
    </div>

    <button @click="goToIndex">Go to Index</button>

  </div>
</template>


<style scoped lang="scss">
.input-container {
  border: 2px solid #ccc;
  padding: 10px;
  border-radius: 15px;
  width: 400px;
  height: 400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgb(255, 255, 255);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.captcha-container {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  margin-bottom: 10px;
}

.content {
  margin-bottom: 10px;
}

.footer {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  width: 290px;
}

.login-button {
  width: 290px;
  height: 40px;
  font-size: 18px;
}

.get-code-button {
  padding: 0 10px;
  white-space: nowrap;
}
</style>

